import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select, Rate } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title } = Typography;
const { TextArea } = Input;

export default function ConsumerReviews() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const businessNameRef = useRef<HTMLDivElement>(null);
  const businessTypeRef = useRef<HTMLDivElement>(null);
  const ratingRef = useRef<HTMLDivElement>(null);
  const styleRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'businessName',
      title: '输入商家名称',
      description: '请输入您想要生成点评的商家名称',
    },
    {
      key: 'businessType',
      title: '选择商家类型',
      description: '选择商家的类型，以便生成更符合商家特性的点评',
    },
    {
      key: 'rating',
      title: '设置星级评分',
      description: '选择您对商家的满意程度，最高5星',
    },
    {
      key: 'style',
      title: '选择点评风格',
      description: '选择您想要的点评风格，包括真实客观、热情推荐等',
    },
    {
      key: 'generateButton',
      title: '生成消费点评',
      description: '完成所有设置后，点击此按钮生成消费点评',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的点评内容',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    businessName: businessNameRef,
    businessType: businessTypeRef,
    rating: ratingRef,
    style: styleRef,
    generateButton: generateButtonRef,
    result: resultRef,
  };

  // 生成消费点评的模拟函数
  const generateContent = (
    businessName: string,
    businessType: string,
    rating: number,
    visitExperience: string,
    pros: string,
    cons: string,
    highlights: string,
    style: string
  ): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = '';

    // 点评标题
    const titles = [
      `${businessName}探店体验分享`,
      `${businessName}值得去吗？真实测评`,
      `${businessType}中的宝藏店铺——${businessName}`,
      `打卡${businessName}后的真实感受`,
      `${businessName}体验记：${rating}星推荐`,
      `在${businessName}消费的难忘经历`
    ];
    const randomTitle = titles[Math.floor(Math.random() * titles.length)];
    result += `【点评标题】\n${randomTitle}\n\n`;

    // 星级评分
    result += `【星级评分】\n`;
    let stars = '';
    for (let i = 0; i < Math.floor(rating); i++) {
      stars += '⭐';
    }
    if (rating % 1 !== 0) {
      stars += '½';
    }
    result += `${stars} ${rating}/5 分\n\n`;

    // 消费体验
    result += `【消费体验】\n`;
    if (visitExperience) {
      result += visitExperience + '\n';
    } else {
      if (businessType.includes('餐厅')) {
        result += `这家${businessName}是朋友推荐的，${style === '美食探店' ? '早就想来打卡了！' : '这次终于有机会来体验一下。'} 我们是${Math.random() > 0.5 ? '周末' : '工作日'}去的，${Math.random() > 0.5 ? '店里人很多' : '生意很好'}，需要排队${Math.random() > 0.5 ? '半小时' : '15分钟'}左右。\n`;
        result += `服务员态度${Math.random() > 0.5 ? '热情周到' : '很好'}，上菜速度${Math.random() > 0.5 ? '很快' : '还可以'}，整体用餐体验${Math.random() > 0.5 ? '非常愉快' : '不错'}。\n`;
      } else if (businessType.includes('酒店')) {
        result += `这次旅行选择了${businessName}，${style === '旅行体验' ? '果然没有让我失望！' : '想体验一下传说中的服务。'} 酒店位置${Math.random() > 0.5 ? '很好' : '便利'}，距离${Math.random() > 0.5 ? '市中心' : '景点'}很近，交通${Math.random() > 0.5 ? '方便' : '便利'}。\n`;
        result += `前台服务${Math.random() > 0.5 ? '热情' : '专业'}，办理入住${Math.random() > 0.5 ? '很快' : '效率高'}，客房${Math.random() > 0.5 ? '干净整洁' : '舒适宽敞'}，整体住宿体验${Math.random() > 0.5 ? '很棒' : '很好'}。\n`;
      } else if (businessType.includes('景点')) {
        result += `${businessName}是当地的${Math.random() > 0.5 ? '著名景点' : '热门打卡地'}，${style === '旅行体验' ? '早就想来看看了！' : '这次终于有机会游览。'} 我们是${Math.random() > 0.5 ? '上午' : '下午'}去的，${Math.random() > 0.5 ? '游客很多' : '人山人海'}，需要排队进入。\n`;
        result += `景区环境${Math.random() > 0.5 ? '优美' : '干净'}，设施${Math.random() > 0.5 ? '完善' : '齐全'}，工作人员态度${Math.random() > 0.5 ? '热情' : '友好'}，整体游览体验${Math.random() > 0.5 ? '非常愉快' : '不错'}。\n`;
      } else if (businessType.includes('影院')) {
        result += `周末和朋友一起来${businessName}看电影，${style === '生活分享' ? '体验真的很棒！' : '想感受一下这里的设施。'} 影院环境${Math.random() > 0.5 ? '干净整洁' : '舒适'}，座椅${Math.random() > 0.5 ? '宽敞舒适' : '很舒服'}，音响效果${Math.random() > 0.5 ? '震撼' : '很好'}。\n`;
        result += `工作人员态度${Math.random() > 0.5 ? '热情' : '友好'}，购票和入场流程${Math.random() > 0.5 ? '简单快捷' : '很顺畅'}，整体观影体验${Math.random() > 0.5 ? '非常满意' : '不错'}。\n`;
      } else {
        result += `最近去了${businessName}，${style === '生活分享' ? '体验真的很好！' : '想尝试一下这里的服务。'} 店铺环境${Math.random() > 0.5 ? '干净整洁' : '舒适'}，工作人员态度${Math.random() > 0.5 ? '热情' : '友好'}，消费过程${Math.random() > 0.5 ? '愉快' : '顺畅'}。\n`;
      }
    }

    // 产品/服务评价
    result += `\n【产品/服务评价】\n`;
    if (businessType.includes('餐厅')) {
      result += `${businessName}的菜品${Math.random() > 0.5 ? '味道很好' : '非常地道'}，我们点了${Math.random() > 0.5 ? '招牌菜XXX' : '推荐菜XXX'}和${Math.random() > 0.5 ? '特色小吃XXX' : '主食XXX'}，都${Math.random() > 0.5 ? '很美味' : '好吃'}。\n`;
      result += `菜品分量${Math.random() > 0.5 ? '很足' : '适中'}，价格${Math.random() > 0.5 ? '实惠' : '合理'}，性价比${Math.random() > 0.5 ? '很高' : '不错'}。\n`;
    } else if (businessType.includes('酒店')) {
      result += `${businessName}的客房${Math.random() > 0.5 ? '宽敞明亮' : '干净整洁'}，设施${Math.random() > 0.5 ? '齐全' : '完善'}，床${Math.random() > 0.5 ? '很舒服' : '软硬适中'}，睡得很香。\n`;
      result += `酒店的${Math.random() > 0.5 ? '早餐品种丰富' : '服务周到'}，整体来说${Math.random() > 0.5 ? '物有所值' : '性价比不错'}。\n`;
    } else if (businessType.includes('景点')) {
      result += `${businessName}的景色${Math.random() > 0.5 ? '太美了' : '非常壮观'}，尤其是${Math.random() > 0.5 ? 'XXX景点' : '山顶的风光'}，让人${Math.random() > 0.5 ? '心旷神怡' : '流连忘返'}。\n`;
      result += `门票价格${Math.random() > 0.5 ? '合理' : '略贵'}，但${Math.random() > 0.5 ? '值得一去' : '体验还不错'}。\n`;
    } else if (businessType.includes('影院')) {
      result += `${businessName}的观影效果${Math.random() > 0.5 ? '非常好' : '很棒'}，音响${Math.random() > 0.5 ? '震撼' : '清晰'}，画面${Math.random() > 0.5 ? '清晰' : '流畅'}，座椅${Math.random() > 0.5 ? '舒适' : '宽敞'}。\n`;
      result += `票价${Math.random() > 0.5 ? '合理' : '略高'}，但${Math.random() > 0.5 ? '观影体验很好' : '值得这个价格'}。\n`;
    } else {
      result += `${businessName}的${Math.random() > 0.5 ? '产品质量' : '服务质量'}${Math.random() > 0.5 ? '很好' : '不错'}，符合预期。\n`;
      result += `价格${Math.random() > 0.5 ? '合理' : '适中'}，性价比${Math.random() > 0.5 ? '不错' : '一般'}。\n`;
    }

    // 亮点
    result += `\n【消费亮点】\n`;
    if (highlights) {
      const highlightsList = highlights.split('\n').filter(h => h.trim());
      highlightsList.forEach((highlight, index) => {
        result += `💡 ${index + 1}. ${highlight}\n`;
      });
    } else {
      result += `💡 1. ${Math.random() > 0.5 ? '服务态度好' : '环境舒适'}\n`;
      result += `💡 2. ${Math.random() > 0.5 ? '产品质量好' : '性价比高'}\n`;
      result += `💡 3. ${Math.random() > 0.5 ? '位置便利' : '设施齐全'}\n`;
    }

    // 优点
    result += `\n【商家优点】\n`;
    if (pros) {
      const prosList = pros.split('\n').filter(p => p.trim());
      prosList.forEach((pro, index) => {
        result += `👍 ${index + 1}. ${pro}\n`;
      });
    } else {
      if (rating >= 4) {
        result += `👍 1. ${Math.random() > 0.5 ? '服务周到' : '环境舒适'}\n`;
        result += `👍 2. ${Math.random() > 0.5 ? '产品质量好' : '性价比高'}\n`;
        result += `👍 3. ${Math.random() > 0.5 ? '位置便利' : '交通方便'}\n`;
        result += `👍 4. ${Math.random() > 0.5 ? '设施齐全' : '体验良好'}\n`;
      } else {
        result += `👍 1. ${Math.random() > 0.5 ? '价格实惠' : '服务态度不错'}\n`;
        result += `👍 2. ${Math.random() > 0.5 ? '环境干净' : '位置便利'}\n`;
      }
    }

    // 缺点（如果评分低于5分）
    if (rating < 5) {
      result += `\n【小小不足】\n`;
      if (cons) {
        const consList = cons.split('\n').filter(c => c.trim());
        consList.forEach((con, index) => {
          result += `👎 ${index + 1}. ${con}\n`;
        });
      } else {
        if (rating >= 4) {
          result += `👎 1. ${Math.random() > 0.5 ? '排队时间有点长' : '价格略高'}\n`;
          result += `👎 2. ${Math.random() > 0.5 ? '高峰期人太多' : '部分设施需要更新'}\n`;
        } else {
          result += `👎 1. ${Math.random() > 0.5 ? '服务有待提高' : '环境一般'}\n`;
          result += `👎 2. ${Math.random() > 0.5 ? '产品质量一般' : '性价比不高'}\n`;
          result += `👎 3. ${Math.random() > 0.5 ? '排队时间过长' : '设施陈旧'}\n`;
        }
      }
    }

    // 总结与推荐
    result += `\n【总结与推荐】\n`;
    if (rating >= 4.5) {
      result += `💯 ${style === '热情推荐' ? '强烈推荐！' : '非常推荐！'} ${businessName}是一家${Math.random() > 0.5 ? '非常出色' : '值得信赖'}的${businessType}，绝对值得一去！\n`;
    } else if (rating >= 3.5) {
      result += `👍 ${style === '热情推荐' ? '推荐前往！' : '可以去体验。'} ${businessName}整体表现${Math.random() > 0.5 ? '不错' : '符合预期'}，虽然有一些小缺点，但不影响整体体验。\n`;
    } else {
      result += `🤔 ${style === '真实客观' ? '可以考虑前往。' : '建议谨慎选择。'} ${businessName}有一定的优点，但也存在一些不足，建议根据个人需求进行选择。\n`;
    }

    // 小贴士
    result += `\n【消费小贴士】\n`;
    if (businessType.includes('餐厅')) {
      result += `- ${Math.random() > 0.5 ? '建议提前预约，避免排队等待' : '推荐尝试他们家的招牌菜'}\n`;
      result += `- ${Math.random() > 0.5 ? '周末人流量大，建议错峰前往' : '人均消费大约在XX元左右'}\n`;
    } else if (businessType.includes('酒店')) {
      result += `- ${Math.random() > 0.5 ? '节假日期间建议提前预订' : '可以选择含早餐的房型，性价比更高'}\n`;
      result += `- ${Math.random() > 0.5 ? '会员可以享受更多优惠' : '酒店周边有很多美食和购物场所'}\n`;
    } else if (businessType.includes('景点')) {
      result += `- ${Math.random() > 0.5 ? '建议早上前往，避开人流高峰' : '可以网上购票，节省排队时间'}\n`;
      result += `- ${Math.random() > 0.5 ? '景区内有多个拍照打卡点，不要错过' : '记得带上防晒用品和足够的水'}\n`;
    } else if (businessType.includes('影院')) {
      result += `- ${Math.random() > 0.5 ? '可以在网上提前选座，避免好位置被抢' : '会员日观影有优惠'}\n`;
      result += `- ${Math.random() > 0.5 ? '影院内有卖小吃和饮料' : 'IMAX厅的观影效果更好'}\n`;
    } else {
      result += `- ${Math.random() > 0.5 ? '可以关注商家的公众号，获取最新优惠信息' : '周末人流量大，建议错峰前往'}\n`;
      result += `- ${Math.random() > 0.5 ? '会员可以享受更多福利' : '推荐尝试他们的招牌产品'}\n`;
    }

    // 结尾
    result += `\n【结尾】\n`;
    if (style === '真实客观') {
      result += `以上是我在${businessName}的真实消费体验，希望能对大家有所帮助。\n`;
    } else if (style === '热情推荐') {
      result += `总之，${businessName}是我近期消费体验最满意的商家之一，强烈推荐给大家！\n`;
    } else if (style === '生活分享') {
      result += `这次在${businessName}的消费体验${Math.random() > 0.5 ? '很愉快' : '不错'}，下次还会再来！\n`;
    } else if (style === '美食探店') {
      result += `${businessName}绝对是${businessType}中的佼佼者，吃货朋友们一定不要错过！\n`;
    } else if (style === '旅行体验') {
      result += `在${businessName}的这段经历，为我的旅行增添了很多美好的回忆！\n`;
    }

    // 用户信息（模拟）
    const userNames = ['探店达人', '美食爱好者', '旅行博主', '生活家', '品质控', '性价比追求者'];
    const randomUserName = userNames[Math.floor(Math.random() * userNames.length)];
    const visitDates = ['2023-11-15', '2023-11-10', '2023-11-05', '2023-10-28', '2023-10-20'];
    const randomVisitDate = visitDates[Math.floor(Math.random() * visitDates.length)];
    result += `\n—— ${randomUserName} (消费日期：${randomVisitDate})`;

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { businessName, businessType, rating, visitExperience, pros, cons, highlights, style } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(businessName, businessType, rating, visitExperience, pros, cons, highlights, style);
      setGeneratedContent(generated);
      message.success('消费点评生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '消费点评.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 商家类型选项
  const businessTypeOptions = [
    { label: '餐厅/美食', value: '餐厅/美食' },
    { label: '酒店/住宿', value: '酒店/住宿' },
    { label: '景点/旅游', value: '景点/旅游' },
    { label: '影院/娱乐', value: '影院/娱乐' },
    { label: '购物/零售', value: '购物/零售' },
    { label: '美容/美发', value: '美容/美发' },
    { label: '健身/运动', value: '健身/运动' },
    { label: '其他', value: '其他' },
  ];

  // 点评风格选项
  const styleOptions = [
    { label: '真实客观', value: '真实客观' },
    { label: '热情推荐', value: '热情推荐' },
    { label: '生活分享', value: '生活分享' },
    { label: '美食探店', value: '美食探店' },
    { label: '旅行体验', value: '旅行体验' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Title level={2} style={{ display: 'flex', alignItems: 'center' }}>
          消费点评生成
          <TourGuideButton onClick={showTour} />
        </Title>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              businessType: '餐厅/美食',
              rating: 5,
              style: '真实客观',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="businessName"
                  label="商家名称"
                  rules={[{ required: true, message: '请输入商家名称' }]}
                >
                  <div ref={businessNameRef}>
                    <Input placeholder="请输入商家名称" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="businessType"
                  label="商家类型"
                  rules={[{ required: true, message: '请选择商家类型' }]}
                >
                  <div ref={businessTypeRef}>
                    <Select placeholder="请选择商家类型" options={businessTypeOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="rating"
                  label="星级评分"
                  rules={[{ required: true, message: '请选择星级评分' }]}
                >
                  <div ref={ratingRef}>
                    <Rate allowHalf defaultValue={5} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="style"
                  label="点评风格"
                  rules={[{ required: true, message: '请选择点评风格' }]}
                >
                  <div ref={styleRef}>
                    <Select placeholder="请选择点评风格" options={styleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="visitExperience"
                  label="消费体验（可选）"
                >
                  <TextArea rows={3} placeholder="请输入消费体验，如环境、服务等，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="highlights"
                  label="消费亮点（可选）"
                >
                  <TextArea rows={2} placeholder="请输入本次消费的亮点，每行一个，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="pros"
                  label="商家优点（可选）"
                >
                  <TextArea rows={3} placeholder="请输入商家的优点，每行一个，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="cons"
                  label="商家不足（可选）"
                >
                  <TextArea rows={3} placeholder="请输入商家的不足，每行一个，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={generateButtonRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成消费点评'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        steps={tourSteps}
        targetRefs={tourRefs}
        onClose={() => setTourVisible(false)}
      />
    </>
  );
}